import React, { useEffect, useState } from "react";
import { Descriptions, Card, Button } from "antd";
// api 请求
import {getHosDetailRequest} from '@/api/hospital/hospitalList';

// api 类型限制
import type {getHospDetailType ,hospitalListItemsType ,hospBookingRuleType} from '@/api/hospital/model/hospitalListType';
import { useNavigate, useParams } from "react-router-dom";
export default function HospitalShow() {

  //传过来的医院id
  const {id}=  useParams();
  //
  const naviGate = useNavigate()

  // 点击返回上一页
  const btnReturn = () => {
    naviGate(-1)
  }
  //保存医院详情的状态
  const [detail , setDetail] = useState<getHospDetailType>({})
  useEffect(() => {
    const getHospDetailHandle = async () => {
      const re = await getHosDetailRequest(id as string )
      setDetail(re)
      
    }
    getHospDetailHandle()
  },[])


  return (
    <div>
      <Card>
        <Descriptions title="基本信息" bordered column={2}>
          <Descriptions.Item label="医院名称">{(detail.hospital as hospitalListItemsType)?.hosname}</Descriptions.Item>
          <Descriptions.Item label="医院logo">
          {(detail.hospital as hospitalListItemsType)?.logoData ? (
            <img
              width={100}
              src={`data:image/jpeg;base64,${
                (detail.hospital as hospitalListItemsType)?.logoData
              }`}
              alt=""
            />
          ) : (
            ""
          )}
          </Descriptions.Item>
          <Descriptions.Item label="医院编码">{(detail.hospital as hospitalListItemsType)?.hoscode}</Descriptions.Item>
          <Descriptions.Item label="医院地址">{(detail.hospital as hospitalListItemsType)?.param?.fullAddress}</Descriptions.Item>
          <Descriptions.Item label="坐车路线" span={2}>
          {(detail.hospital as hospitalListItemsType)?.route}
          </Descriptions.Item>
          <Descriptions.Item label="医院简介" span={2}>
          {(detail.hospital as hospitalListItemsType)?.intro}
          </Descriptions.Item>
        </Descriptions>
        <Descriptions title="预约规则信息" bordered column={2} style = {{marginTop :"30px"}}>
          <Descriptions.Item label="预约周期">{(detail.bookingRule as hospBookingRuleType)?.cycle}</Descriptions.Item>
          <Descriptions.Item label="放号时间">{(detail.bookingRule as hospBookingRuleType)?.releaseTime}</Descriptions.Item>
          <Descriptions.Item label="停挂时间">{(detail.bookingRule as hospBookingRuleType)?.stopTime}</Descriptions.Item>
          <Descriptions.Item label="退号时间">{(detail.bookingRule as hospBookingRuleType)?.quitTime}</Descriptions.Item>
          <Descriptions.Item label="预约规则" span={2}>
          {(detail.bookingRule as hospBookingRuleType)?.rule.map((item,index) => {
            return <p key={index}>{item}</p>
          })}
          </Descriptions.Item>
        </Descriptions>
        <Button style = {{marginTop :"20px"}} onClick = {btnReturn}>
          返回
        </Button>
      </Card>
    </div>
  );
}
